<template>
  <div class="pop">
    <ul class="pop-title">
      <li :class="{active:protectIsShow ==1}" @click="protectIsShow =1">流行</li>
      <li :class="{active:protectIsShow ==2}" @click="protectIsShow =2">新款</li>
      <li :class="{active:protectIsShow ==3}" @click="protectIsShow =3">精选</li>
    </ul>
    <!-- 流行数据 -->
    <ul class="pop-conent" v-show="protectIsShow == 1">
      <li v-for="item in popProtect" :key="item.id">
        <div class="images">
          <img :src="item.showLarge.img" alt />
        </div>
        <div class="text">
          <p class="text1">{{item.title}}</p>
          <p class="text2">
            <span class="price">{{item.price}}</span>
            <span class="iconfont icon-shoucang"></span>
            <span>{{item.cfav}}</span>
          </p>
        </div>
      </li>
    </ul>
    <!-- 新款数据 -->
    <ul class="pop-conent" v-show="protectIsShow == 2">
      <li v-for="item in nweProtect" :key="item.id">
        <div class="images">
          <img :src="item.showLarge.img" alt />
        </div>
        <div class="text">
          <p class="text1">{{item.title}}</p>
          <p class="text2">
            <span class="price">{{item.price}}</span>
            <span class="iconfont icon-shoucang"></span>
            <span>{{item.cfav}}</span>
          </p>
        </div>
      </li>
    </ul>
    <!-- 精选数据 -->
    <ul class="pop-conent" v-show="protectIsShow == 3">
      <li v-for="item in sellProtect" :key="item.id">
        <div class="images">
          <img :src="item.showLarge.img" alt />
        </div>
        <div class="text">
          <p class="text1">{{item.title}}</p>
          <p class="text2">
            <span class="price">{{item.price}}</span>
            <span class="iconfont icon-shoucang"></span>
            <span>{{item.cfav}}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { ProtectApi } from "@/request/api";
export default {
  data() {
    return {
      // 流行产品列表
      popProtect: [],
      //新款数据列表
      nweProtect: [],
      // 精选数据列表
      sellProtect: [],
      // 控制是否显示
      protectIsShow: 1
    };
  },
  created() {
    // 流行数据
    let obj1 = { type: "pop", page: 1 };
    ProtectApi(obj1).then(res => {
      if (res.status == 200) {
        // console.log(res.data.data.list);
        this.popProtect = res.data.data.list;
      }
    });

    // 新款数据
    let obj2 = { type: "new", page: 1 };
    ProtectApi(obj2).then(res => {
      if (res.status == 200) {
        // console.log(res.data.data.list);
        this.nweProtect = res.data.data.list;
      }
    });
    // 新款数据
    let obj3 = { type: "sell", page: 1 };
    ProtectApi(obj3).then(res => {
      if (res.status == 200) {
        // console.log(res.data.data.list);
        this.sellProtect = res.data.data.list;
      }
    });
  }
};
</script>
 
<style lang = "less" scoped>
.pop {
  margin-top: 10px;
  width: 100%;
  /* height: 460px; */
  /* background-color: rgb(11, 164, 225); */
  .pop-title {
    width: 100%;
    height: 50px;
    background-color: #f8eff0;
    color: #666666;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .active {
      color: #ff699c;
    }
  }
  .pop-conent {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      margin-top: 10px;
      height: 339px;
      width: 199px;
      /* background-color: rgb(235, 197, 135); */
      .images {
        width: 195px;
        height: 299px;
        border: 2px solid;
        color: #ff699c;
        img {
          width: 195px;
          height: 299px;
        }
      }
      .text {
        padding-top: 5px;
        .text1 {
          font-size: 12px;
          color: #666666;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .text2 {
          text-align: center;
          font-size: 12px;
          .price {
            color: #ff699c;
          }
          .icon-shoucang {
            margin: 0 3px;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>